import React, { Component } from 'react';
import logo from '../logo.svg'
import  '../componese/List.css'
class List extends Component {
    constructor(props){
        super(props);
        this.state ={
            arr:[
                {name:"护肤",pic:logo},
                {name:"彩妆",pic:logo},
                {name:"香氛",pic:logo},
                {name:"进口酒",pic:logo},
                {name:"国产酒",pic:logo},
                {name:"精品奢货",pic:logo},
                {name:"食品百货",pic:logo},
                {name:"母婴专区",pic:logo},
                {name:"直播专区",pic:logo},
                {name:"特卖专场",pic:logo},
            ]
        }
    }
    render() {
        return (
            <div className='list'>
               {
                // 列表渲染  使用js中的map函数
                this.state.arr.map((item,index)=>{
                    return (
                        <div className='cate' key={index}>
                            <img src={item.pic} alt="" />
                            <div className='name'>{item.name}</div>
                        </div>
                    )
                })
               }
            </div>
        );
    }
}

export default List;